Angular Material Overlay একটি অত্যন্ত শক্তিশালী কম্পোনেন্ট যা কনটেন্ট বা উপাদানকে একটি ভাসমান স্তরের (floating layer) আকারে প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত পপ-আপ, টুলটিপ, ড্রপডাউন মেনু, ডায়ালগ, অথবা স্ন্যাকবার তৈরি করতে ব্যবহৃত হয়।

Angular Material Overlay এর মাধ্যমে আপনি কাস্টম এবং অ্যাডভান্সড ইউজার ইন্টারফেস উপাদান তৈরি করতে পারেন, যেখানে ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য ভাসমান উপাদান প্রদর্শিত হয়, যা অ্যাপ্লিকেশনের অন্যান্য অংশের সাথে মিশে না যায়।

Overlay কী?

Overlay হল একটি উপাদান যা সাধারণত ব্যবহারকারীর অ্যাপ্লিকেশনের জন্য দৃশ্যমান হলেও অন্যান্য কনটেন্টের উপরে থাকে। এটি কোনো নির্দিষ্ট স্থানে প্রদর্শিত হয় এবং সেক্ষেত্রে ব্যাকগ্রাউন্ডের কন্টেন্টের উপরে অবস্থান করে।

Overlay ব্যবহারের কিছু সাধারণ উদাহরণ হলো:

• পপ-আপ মেনু: যখন একটি মেনু আইটেম নির্বাচন করা হয়, তখন তা পপ-আপ হয়ে প্রদর্শিত হয়।
• ডায়ালগ বক্স: ব্যবহারকারীর কাছ থেকে ইনপুট বা নিশ্চিতকরণ সংগ্রহ করার জন্য একটি ডায়ালগ বক্স।
• টুলটিপ: একটি ছোট বক্স যা ব্যবহারকারীকে একটি আইটেমের উপর মাউস পয়েন্টার রাখলে তথ্য প্রদর্শন করে।

Angular Material Overlay এর বৈশিষ্ট্য

• Flexible positioning: Overlay সহজে পজিশন করা যায় এবং উপাদানগুলোকে নির্দিষ্ট স্থানে স্থাপন করা যায়।
• Interactive UI components: Overlay টুলটিপ, ডায়ালগ, স্ন্যাকবার বা মেনুর মতো ইন্টারঅ্যাকটিভ উপাদান তৈরি করতে ব্যবহৃত হয়।
• Dynamic content rendering: Overlay ডায়নামিক কনটেন্ট বা একাধিক ভিউ প্রদর্শন করার জন্য উপযোগী।
• Accessibility: Overlay কনটেন্টগুলো অ্যাক্সেসিবল এবং স্ক্রীন রিডার ফ্রেন্ডলি হতে পারে।

Material Overlay ব্যবহার করার জন্য পদক্ষেপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

MatMenuModule, MatDialogModule, MatSnackBarModule ইত্যাদি মডিউলগুলো Angular Material থেকে Overlay ব্যবহার করার জন্য ইমপোর্ট করতে হবে।

import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatMenuModule } from '@angular/material/menu';

২. Overlay কোড উদাহরণ

এখানে একটি Overlay ব্যবহারের উদাহরণ দেখানো হচ্ছে যেখানে স্ন্যাকবার (Snackbar) ব্যবহার করা হয়েছে।

HTML:

<button mat-button (click)="openSnackBar()">Show SnackBar</button>

TypeScript:

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-overlay-example',
  templateUrl: './overlay-example.component.html',
  styleUrls: ['./overlay-example.component.css']
})
export class OverlayExampleComponent {

  constructor(private snackBar: MatSnackBar) {}

  openSnackBar() {
    this.snackBar.open('Message successfully sent!', 'Close', {
      duration: 2000,
    });
  }
}

এখানে:

• MatSnackBar: এটি একটি সহজ Overlay উপাদান যা ছোট বার্তা প্রদর্শন করতে ব্যবহৃত হয়। এখানে, openSnackBar() মেথডটি একটি বার্তা দেখানোর জন্য ব্যবহার করা হয়েছে, যা ২ সেকেন্ড পর অটোমেটিক্যালি ক্লোজ হয়ে যাবে।

৩. Material Dialog (মডাল ডায়ালগ) ব্যবহার করা

Overlay এর একটি অন্যতম ব্যবহার হল MatDialog কম্পোনেন্টের মাধ্যমে মডাল ডায়ালগ তৈরি করা। এটি সাধারণত মডাল উইন্ডো হিসেবে ব্যবহৃত হয়, যা ফর্ম বা কনফিরমেশন প্রদর্শনের জন্য উপযোগী।

HTML:

<button mat-button (click)="openDialog()">Open Dialog</button>

TypeScript:

import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

@Component({
  selector: 'app-dialog-overview-example',
  templateUrl: './dialog-overview-example.html',
})
export class DialogOverviewExample {

  constructor(public dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '250px',
      data: { name: 'Angular' },
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

DialogComponent (ডায়ালগ কন্টেন্ট):

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog',
  template: `<h1 mat-dialog-title>Hi {{data.name}}</h1>
             <div mat-dialog-content>
               <p>Here is the content of the dialog!</p>
             </div>`,
})
export class DialogComponent {

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}

}

এখানে:

• MatDialog: এটি মডাল ডায়ালগ তৈরি করতে ব্যবহৃত হয়, যা Overlay হিসেবে কাজ করে।
• DialogComponent: এটি আপনার ডায়ালগের কনটেন্ট।

৪. MatMenu (মেনু) Overlay ব্যবহার করা

MatMenu একটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যা mat-menu-trigger এর মাধ্যমে ট্রিগার করা হয়।

HTML:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Option 1</button>
  <button mat-menu-item>Option 2</button>
  <button mat-menu-item>Option 3</button>
</mat-menu>

এখানে:

• matMenuTriggerFor: এটি মেনু ট্রিগার করার জন্য ব্যবহৃত হয়। যখন ব্যবহারকারী বাটনে ক্লিক করবেন, তখন এটি মেনুটি প্রদর্শন করবে।

Angular Material Overlay কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ভাসমান উপাদান তৈরি করতে পারেন, যেমন ড্রপডাউন মেনু, স্ন্যাকবার, টুলটিপ, ডায়ালগ এবং আরও অনেক কিছু। এটি UI উপাদানগুলিকে খুবই ইন্টারঅ্যাকটিভ এবং অ্যাক্সেসিবল করে তোলে। Angular Material Dialog, MatSnackBar, এবং MatMenu এর মাধ্যমে আপনি সাশ্রয়ী ও কাস্টমাইজযোগ্য Overlay উপাদান তৈরি করতে পারবেন।

Angular Material এর MatDialog এবং MatMenu কম্পোনেন্টের মাধ্যমে আপনি সহজেই overlay তৈরি করতে পারেন। ওভারলে সাধারণত মোডাল উইন্ডো, পপআপ বা ডায়লগ বক্স তৈরি করতে ব্যবহৃত হয়। Angular Material এর Overlay কম্পোনেন্ট আরও উন্নত কাস্টমাইজেশন এবং ফিচার সমর্থন করে, যেমন পজিশনিং, এনিমেশন, এবং ক্লোজিং ফাংশন।

এখানে MatDialog ব্যবহার করে ওভারলে তৈরি এবং কাস্টমাইজ করার পদ্ধতি ব্যাখ্যা করা হলো।

MatDialog: ডায়লগ ওভারলে তৈরি এবং কাস্টমাইজ করা

MatDialog কম্পোনেন্টটি একটি পপ-আপ ডায়লগ তৈরি করতে ব্যবহৃত হয়, যা ব্যবহারকারীর ইনপুট বা তথ্য প্রদর্শনের জন্য উপযুক্ত।

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatDialogModule আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    MatDialogModule
  ]
})
export class AppModule {}

২. ডায়লগ কম্পোনেন্ট তৈরি করা

ডায়লগ তৈরি করতে আপনাকে একটি নতুন কম্পোনেন্ট তৈরি করতে হবে যা ডায়লগের কন্টেন্ট ধারণ করবে।

ng generate component dialog-content

এখন, dialog-content.component.ts ফাইলের মধ্যে আপনার ডায়লগ কনটেন্টের লজিক যোগ করুন।

import { Component } from '@angular/core';

@Component({
  selector: 'app-dialog-content',
  template: `
    <h1 mat-dialog-title>Dialog</h1>
    <div mat-dialog-content>
      <p>This is an overlay dialog content.</p>
    </div>
    <div mat-dialog-actions>
      <button mat-button (click)="closeDialog()">Close</button>
    </div>
  `
})
export class DialogContentComponent {
  constructor(public dialogRef: MatDialog) {}

  closeDialog(): void {
    this.dialogRef.close();
  }
}

এখানে:

• mat-dialog-title: ডায়লগ টাইটেল।
• mat-dialog-content: ডায়লগ কনটেন্ট।
• mat-dialog-actions: ডায়লগের অ্যাকশন বাটন যেমন ক্লোজ।

৩. ডায়লগ খুলতে মেথড তৈরি করা

আপনি যেই কম্পোনেন্টে ডায়লগ ওপেন করতে চান, সেখানে MatDialog ইনজেক্ট করুন এবং open() মেথড ব্যবহার করুন।

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogContentComponent } from './dialog-content/dialog-content.component';

@Component({
  selector: 'app-root',
  template: `
    <button mat-button (click)="openDialog()">Open Dialog</button>
  `
})
export class AppComponent {

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    this.dialog.open(DialogContentComponent, {
      width: '300px',
      data: { message: 'This is a custom message' }
    });
  }
}

এখানে:

• open(): এটি ডায়লগ ওপেন করার মেথড।
• width: ডায়লগের প্রস্থ নির্ধারণ করা।
• data: ডায়লগে তথ্য পাঠানো (যদি প্রয়োজন হয়)।

৪. ডায়লগে কাস্টম স্টাইল এবং এনিমেশন

আপনি ডায়লগের জন্য কাস্টম স্টাইল এবং এনিমেশন যোগ করতে পারেন। যেমন, CSS ব্যবহার করে ডায়লগের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা।

::ng-deep .mat-dialog-container {
  background-color: #f1f1f1;
  border-radius: 8px;
  padding: 20px;
}

এটি ডায়লগের পটভূমি রঙ এবং স্টাইল কাস্টমাইজ করবে।

Overlay কাস্টমাইজেশন

Angular Material এর Overlay কম্পোনেন্ট আপনাকে আরও উন্নত কাস্টমাইজেশন এবং কন্ট্রোল দেয়, যেমন কাস্টম পজিশনিং, এনিমেশন এবং ক্লোজিং ট্রিগার। আপনি MatDialog এর পরিবর্তে Overlay কম্পোনেন্ট ব্যবহার করতে পারেন, যা এক্সট্রা কন্ট্রোল অফার করে।

১. OverlayService ব্যবহার করে কাস্টম Overlay তৈরি

প্রথমে, OverlayModule ইমপোর্ট করতে হবে।

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  imports: [
    OverlayModule
  ]
})
export class AppModule {}

২. OverlayService দিয়ে কাস্টম Overlay তৈরি

এখন, আপনি OverlayService ব্যবহার করে একটি কাস্টম overlay তৈরি করতে পারেন।

import { Component } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

@Component({
  selector: 'app-root',
  template: `
    <button mat-button (click)="openOverlay()">Open Overlay</button>
  `
})
export class AppComponent {

  constructor(private overlay: Overlay) {}

  openOverlay(): void {
    const overlayRef = this.overlay.create();
    const portal = new ComponentPortal(OverlayContentComponent);
    overlayRef.attach(portal);
  }
}

@Component({
  selector: 'app-overlay-content',
  template: `<p>This is a custom overlay content</p>`
})
export class OverlayContentComponent {}

এখানে:

• Overlay.create(): কাস্টম overlay তৈরি করে।
• ComponentPortal: এটি একটি Angular Component কে overlay-তে স্থানান্তর করে।

Angular Material Overlay এবং MatDialog কম্পোনেন্টগুলি আপনাকে অত্যন্ত কাস্টমাইজেবল এবং ব্যবহারকারী-বান্ধব পপআপ বা ডায়লগ উইন্ডো তৈরি করতে সাহায্য করে। MatDialog সরাসরি পপআপ ডায়লগ তৈরি করতে ব্যবহৃত হয়, যখন Overlay কম্পোনেন্ট আরও উন্নত কাস্টমাইজেশন এবং নিয়ন্ত্রণ প্রদান করে। আপনি ডায়লগ এবং overlay এর মাধ্যমে সহজে ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারেন যা অ্যাপ্লিকেশনকে আরও ইউজার-ফ্রেন্ডলি করে তোলে।